<template>
    <div class="add-bank-main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">添加银行卡</span>
            </template>
        </van-nav-bar>

        <div class="addbank-form">
            <p>温馨提示：请绑定本人的银行卡信息</p>

            <div class="form-template">
                <div class="edit-form-item">
                    <p id="uname">持卡人</p>
                    <input type="text" 
                    id="Iuname"
                    @focus="setPelementStyle('uname','Iuname')" 
                    @blur="outPelementStyle('uname','Iuname')" 
                    v-model="UserInfo.user_name" placeholder="请输入持卡人姓名">
                </div>
                <div class="edit-form-item">
                    <p id="bankcard">银行卡号</p>
                    <input type="number" 
                    id="Ibankcard"
                    @focus="setPelementStyle('bankcard','Ibankcard')" 
                    @blur="outPelementStyle('bankcard','Ibankcard')" v-model="UserInfo.bank_card" placeholder="请输入本人银行卡号">
                </div>
                <div class="edit-form-item">
                    <p id="bankname">开户行</p>
                    <input type="text"  
                    id="Ibankname"
                    @focus="setPelementStyle('bankname','Ibankname')" 
                    @blur="outPelementStyle('bankname','Ibankname')" v-model="UserInfo.bank_name" placeholder="请输入开户行名称">
                </div>
                <div class="edit-form-item">
                    <p id="phonenum">手机号</p>
                    <input type="number" 
                    id="Iphonenum"
                    @focus="setPelementStyle('phonenum','Iphonenum')" 
                    @blur="outPelementStyle('phonenum','Iphonenum')" v-model="UserInfo.mobile" placeholder="请输入银行预留手机号">
                </div>
                <div class="edit-form-item">
                    <p id="valicode">验证码</p>
                    <input type="number" 
                    id="Ivalicode"
                    @focus="setPelementStyle('valicode','Ivalicode')" 
                    @blur="outPelementStyle('valicode','Ivalicode')" v-model="UserInfo.mobile_code" class="message-validate" placeholder="请输入验证码">
                    <van-button type="default" size="small" :class="['valibtn']" @click="getValidate" v-if="!canUseSend">
                        <p v-if="isnotsend">获取验证码</p>
                        <van-count-down v-else :time="time" format="sss"/>
                    </van-button>
                    <van-button type="default" size="small" :class="['valibtn']" v-if="canUseSend">
                        <p>获取验证码</p>
                    </van-button>
                </div>

                <img :src="needsubmit?submitActive:submitbtn" class="btnimg" @click="save" alt="">
            </div>
        </div>
    </div>
</template>
<script>
import { _sendvalidatecode } from '../../service/user.js'
import { _addEditUserCard } from '../../service/bank.js'
export default {
    data(){
        return{
            UserInfo:{
                user_name:"",
                bank_card:"",
                bank_name:"",
                mobile:"",
                mobile_code:"",
            },
            needsubmit:false,
            backicon:require('../../assets/img/backicon.png'),
            submitbtn:require('../../assets/img/submit.png'),
            submitActive:require('../../assets/img/submitactive.png'),

            canUseSend:true,//disabled
            isnotsend:true,
            time:60000,
        }
    },
    computed:{
        userName(){
            return this.UserInfo.user_name
        },
        bankCard(){
            return this.UserInfo.bank_card
        },
        bankName(){
            return this.UserInfo.bank_name
        },
        mobile(){
            return this.UserInfo.mobile
        },
        mobileCode(){
            return this.UserInfo.mobile_code
        },

    },
    watch:{
        userName(newV){
            this.btnvalidate()
        },
        bankCard(newV){
            this.btnvalidate()
        },
        bankName(newV){
            this.btnvalidate()
        },
        mobile(newV){
            this.btnvalidate()
        },
        mobileCode(newV){
            this.btnvalidate()
        }
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        },
        setPelementStyle(dom,dom2){
            document.getElementById(dom).style.color='#999'
            document.getElementById(dom).style.fontSize="13px"
            document.getElementById(dom2).style.fontSize="13px"
            document.getElementById(dom2).style.fontWeight="bold"
        },
        outPelementStyle(dom,dom2){
            document.getElementById(dom).style.color="#333"
            document.getElementById(dom).style.fontSize="13px"
            document.getElementById(dom2).style.fontSize="13px"
            document.getElementById(dom2).style.fontWeight="normal"
        },
        back(){
            this.$router.push("/banklist")
        },
        btnvalidate(){
            if(this.UserInfo.user_name==""){
                this.canUseSend=true
                return false
            }
            if(!this.validatephone(this.UserInfo.mobile)){
                this.canUseSend=true
                return false
            }
            if(!this.CheckBankNo()){
                this.canUseSend=true
                return false
            }
            if(this.UserInfo.bank_name==""){
                this.canUseSend=true
                return false
            }
            this.canUseSend=false
            if(this.UserInfo.mobile_code==""){
                return false
            }
            if(this.UserInfo.mobile_code.length==4){
                this.needsubmit=true
            }else{
                this.needsubmit=false
            }
            return true
        },
        valdate(){
            if(this.UserInfo.user_name==""){
                this.$toast.fail("持卡人不能为空")
                return false
            }
            if(!this.validatephone(this.UserInfo.mobile)){
                this.$toast.fail("请输入正确的手机号")
                return false
            }
            if(!this.CheckBankNo()){
                return false
            }
            if(this.UserInfo.bank_name==""){
                this.$toast.fail("开户行不能为空")
                return false
            }
            if(this.UserInfo.mobile_code==""){
                this.$toast.fail("验证码不能为空")
                return false
            }
            return true
        },
        validatephone(val){
			let nub=val.replace(/\s*/g,"").replace("+86","")
			if(!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(nub))){ 
				return false; 
			} 
			return true
        },
        CheckBankNo() {
            let bankno = this.UserInfo.bank_card.replace(/\s*/g,"")
        　　if(bankno == "") {
            　　 this.$toast.fail("请填写银行卡号");
                return false;
            }
            if(bankno.length < 16 || bankno.length > 19) {
                 this.$toast.fail("银行卡号长度必须在16到19之间");
                return false;
            }
            var num = /^\d*$/;
            if(!num.exec(bankno)) {
                 this.$toast.fail("银行卡号必须全为数字");
                return false;
            }
            return true
        },
        getValidate(){
			let _this=this
			if(this.validatephone(this.UserInfo.mobile)){
				let nub=_this.UserInfo.mobile.replace(/\s*/g,"").replace("+86","")
				this.isnotsend=false
				setTimeout(()=>{
                    _this.isnotsend=true
				},60000)
				_sendvalidatecode({mobile:nub}).then(res=>{
					_this.$toast(res.message)
				})
			}else{
				this.$toast.fail('请输入正确的手机号');
			}
        },
        save(){
            let _this=this
            // _this.$toast.loading({
            //     duration: 0, // 持续展示 toast
            //     forbidClick: true,
            // })
            let uid=JSON.parse(localStorage.getItem('user')).user_id
            this.UserInfo.user_id=uid
            console.log(this.UserInfo)
            if(this.valdate()){
                _addEditUserCard(this.UserInfo).then(res=>{
                    console.log(res)
                    setTimeout(()=>{
                        _this.$toast.clear()
                        _this.$toast(res.message)
                        if(res.errcode==1){
                            if(localStorage.getItem("routerHistory")=="/bankapply"){
                                _this.$router.push("/bankapply")
                            }else{
                                _this.$router.push("/banklist")
                            }
                        }
                    },1000)
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
@topheight:62px;

.fullwidth{
    width: 100%;
}
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.form-input-rule(){
    background:none;  
    outline:none;  
    border:none;
    .font-SC();
    font-size: 10px;
    line-height: 25px;
    color: #000;
    caret-color:#000;
    font-weight: normal;
}
.placeholderClass(){
    .font-SC();
    font-size: 13px;
    color: #ccc;

}

.add-bank-main{
    .fullwidth();
    height: 100vh;
    overflow-y: auto;
    background-color: #f8f8f8;

    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }


    .addbank-form{
        width: 100%;
        p{
            .font-SC();
            font-weight: bold;
            color: #f26e6e;
            font-size: 13px; 
            line-height: 33px;
            padding-left: 17px;
            margin-bottom: 0;
        }
        .form-template{
            .fullwidth();
            height: 359px;
            background-color: #fff;
            padding:0 17px 0 17px;
            .edit-form-item{
                height: 69px;
                border-bottom: 1px solid #efefef;
                p{
                    .font-SC();
                    font-weight: bold;
                    font-size: 13px;
                    margin-bottom: 0;
                    padding-left: 0;
                    color: #333;
                    padding-top: 5px;
                    // float: left;
                }
                .fullwidth();
                input{
                    .fullwidth();
                    .form-input-rule();
                    &::-webkit-input-placeholder{
                        .placeholderClass();
                    }
                    &::-moz-placeholder{
                        .placeholderClass();
                    }
                    &::-ms-input-placeholder{
                        .placeholderClass();
                    }
                }
                .message-validate{
                    width: 70%;
                }
                .van-button--small{
                    padding: 0;
                    margin-top: -4px;
                }
                .valibtn{
                    display: inline-block;
                    width: 66px;
                    height: 30px;
                    line-height: 30px;
                    margin-bottom: 6px;
                    float: right;
                    font-size: 10px;
                    background-color: #f5f5f5;
                    .font-SC();
                    p{
                        font-size: 12px;
                        color: #666;
                        padding-top: 0;
                        line-height: 30px;
                        font-weight: 300;
                    }
                }
                .valibtnactive{
                    display: inline-block;
                    width: 66px;
                    height: 30px;
                    line-height: 30px;
                    margin-bottom: 6px;
                    float: right;
                    font-size: 10px;
                    background-color: #000;
                    .font-SC();
                    p{
                        color: #fff;
                        font-size: 12px;
                        padding-top: 0;
                        line-height: 30px;
                        font-weight: 300;
                    }
                }
            }
        }
    }


    .btnimg{
        width: 345px;
        margin: 180px auto 0 auto;
    }
    @media (max-height: 670px){
        .btnimg{
            width: 345px;
            margin: 60px auto 0 auto;
        }
    }

    .sendmsgbtndeactive{
        background-color: #f5f5f5;
        color: #666;
    }
    .sendmsgbtnactive{
        background-color: #000;
        color: #fff;
    }

}
</style>